<template>
  <section class="cms-body" v-loading="loading">
    <!-- 返回组件 -->
    <cms-back></cms-back>

    <el-form ref="form" :model="dataInfo" :rules="rules" class="cms-form" label-width="162px">

      <el-form-item label="话题名称" class="flex-50" prop="problemTopicName">
        <el-input v-model="dataInfo.problemTopicName" class="cms-width" placeholder="20个字符以内"></el-input>
      </el-form-item>

      <el-form-item label="轮播" class="flex-50" prop="isSlider">
        <el-radio-group v-model="dataInfo.isSlider">
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="是否展示" class="flex-50" prop="isSlider">
        <el-radio-group v-model="dataInfo.isDisplay">
          <el-radio :label="1">展示</el-radio>
          <el-radio :label="0">不展示</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="排列顺序" class="flex-50" prop="problemTopicSort">
        <el-input v-model="dataInfo.problemTopicSort" class="cms-width"></el-input>
      </el-form-item>

      <el-form-item label="话题封面图" class="flex-50" prop="problemTopicImg">
        <cms-upload :src="dataInfo.problemTopicImg" @change="getProblemTopicImg" :is-mark="false" uploadPath="images"></cms-upload>
        <span style="color:red">建议上传图片尺寸：750*395</span>
      </el-form-item>
      <el-form-item label="话题Pc封面图" class="flex-50" prop="problemTopicPcImg">
        <cms-upload :src="dataInfo.problemTopicPcImg" @change="getProblemTopicPcImg" :is-mark="false" uploadPath="images"></cms-upload>
        <span style="color:red">建议上传图片尺寸：1200*363</span>
      </el-form-item>

    </el-form>

    <div class="form-footer">
      <el-button type="warning" v-if="isType('save')" @click="add(true)" v-perms="'/problemTopic/save'">提交并继续添加
      </el-button>
      <el-button type="primary" v-if="isType('save')" @click="add(false)" v-perms="'/problemTopic/save'">添加</el-button>
      <el-button type="primary" v-if="isType('update')" @click="update()" v-perms="'/problemTopic/update'">修改
      </el-button>
      <el-button type="info" @click="$reset">重置</el-button>
      <span class="gray" v-if="isType('save')"> 选择“提交并继续添加”按钮会停留在添加页面；选择“提交”按钮后将跳转到对应的列表页</span>
    </div>

  </section>
</template>
<script>
  import axios from "axios";
  import va from "@/rules";
  import formMixns from "@/mixins/form";

  export default {
    mixins: [formMixns],
    data() {
      let required = va.required();
      let number = va.number();
      let problemTopicName = (rule, value, callback) => {
        if (this.$myUtils.isNull(value)) {
          callback(new Error('话题名称必填'));
        }
        if (value.length > 20) {
          callback(new Error('话题名称20个字符以内'));
        } else {
          callback();
        }
      }
      return {
        rules: {//校验规则
          problemTopicName: [{validator: problemTopicName, trigger: 'blur'}],
          problemTopicSort: [required, number]
        },
        dataInfo: {
          problemTopicId: '',
          problemTopicName: '',
          problemTopicImg: '',
          problemTopicPcImg: '',
          problemTopicSort: 99,
          isSlider: 0,
          isDisplay: 0
        }
      };
    },
    methods: {
      getDataInfo(problemTopicId, type) {
        if (type == 'update') {
          //重写获取表单数据
          let api = this.$api; //API地址
          axios.post(api.problemTopicGet, {problemTopicId: problemTopicId}).then(res => {
            this.dataInfo = res.body; //将用户数据复制给dataInfo
            console.log(res)
            this.$refs["form"].resetFields();
          })
        }
        this.loading = false;
      },
      getProblemTopicImg(src) {
        this.dataInfo.problemTopicImg = src;
      },
      getProblemTopicPcImg(src) {
        this.dataInfo.problemTopicPcImg = src;
      },
      add(state) {
        this.saveDataInfo(state, this.$api.problemTopicSave, this.dataInfo, "pageList");
      },
      update() {
        this.updateDataInfo(this.$api.problemTopicUpdate, this.dataInfo, "pageList");
      },
      handleClose(done) {
        done();
      }
    },
    created() {
      this.getDataInfo(this.id, this.type);
    }
  };
</script>

<style>
</style>
